@extends('home.layout.base')
@section('styles')
    <link href="{{ asset('css/index.css') }}" rel="stylesheet">
@endsection
@section('scripts')
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/index.js') }}" type="text/javascript"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],
                    loading: false,//加载loading开关
                    params:{page : 1, title : ''},
                }
            },
            created(){
                this.list();
            },
            methods: {
                list() {
                    let that = this;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('home.project.index') }}",this.params,function(res){
                            that.listData = res.data;
                            that.loading = false;
                            that.params.page ++;
                        })
                    },300);
                },
                changePage(val) {
                    this.params.page = val;
                    this.list();
                },
                info(id) {
                    window.location.href = "{{ route('home.project.info') }}"+'?id='+id;
                },
                search(){
                    this.params.page = 1;
                    this.list();
                },
            },
            filters:{
                ellipsis(value){
                    if(!value) return ''
                    if(value.length > 10){
                        return value.slice(0,10) + '...'
                    }
                    return value
                }
            }
        });
        $(function () {

        })
    </script>
@endsection
@section('content')
    <div class="container main project">
        <div class="row">
            <div class="col-lg-12 project-title">
                <p class="project-t">项目</p>
                <p>搜罗区块链领域最优项目</p>
            </div>
        </div>
    </div>
    <div class="container" style="padding-bottom: 25px">
        <div class="row">
            <div class="col-lg-12" style="padding-right: 0" id="app" v-cloak v-cloak v-loading="loading"
                 element-loading-spinner="fa fa-spinner fa-pulse" style="min-height: 250px">
                <div class="project-search">
                    <input v-model="params.title" type="text" placeholder="搜索">
                    <button @click="search()" class="project-search-btn"></button>
                </div>
                <div class="col-lg-6" v-for="items in listData.data" @click="info(items.id)">
                    <div class="main-project-item">
                        <div class="project-item-info">
                            <div class="item-info-avatar">
                                <img :src="items.thumb" alt="">
                            </div>
                            <div class="item-info-go">
                                <p class="item-info-name"> @{{ items.title | ellipsis }} <button>@{{ items.cate.name }}</button></p>
                                <p class="item-info-tag tag1"><i class="fa fa-map-marker"></i> &nbsp;@{{ items.region }}</p>
                                <p class="item-info-tag tag2"><i class="fa fa-tag"></i> &nbsp;@{{ items.explain }}</p>
                                <p class="item-info-tag tag3"><i class="fa fa-clock-o"></i> &nbsp;@{{ moment(items.online).format('YYYY年MM月DD日') }}上线</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 liange-pagination">
                    <el-pagination v-if="listData && listData.last_page > 1"
                                   background
                                   :page-size="listData.per_page"
                                   layout="prev, pager, next, jumper"
                                   :total="listData.total"
                                   prev-text="上一页"
                                   next-text="下一页"
                                   :current-page="listData.current_page"
                                   @current-change="changePage">
                    </el-pagination>
                </div>
            </div>

        </div>
    </div>
@endsection




